<template>
  <div
    class="w-[48%] h-24 overflow-hidden rounded-sm relative mb-1 text-white font-bold text-[12px]"
  >
    <img :src="data.image.url" alt="" class="w-full h-full" />
    <div class="absolute bottom-0 left-0 backdrop-blur-sm pt-1">
      <div class="pl-1">{{ data.summaryText }}</div>
      <div
        class="w-full px-[4px] overflow-hidden text-ellipsis line-clamp-3 mb-0.5"
      >
        {{ data.houseName }}
      </div>
      <div class="flex justify-between px-0.5 mb-0.5">
        <van-rate
          :model-value="Number(data.commentScore)"
          readonly
          size="14"
          allow-half
          color="#ff9854"
        />
        <div>{{ '¥ ' + data.finalPrice }}</div>
      </div>
    </div>
  </div>
</template>
<script setup>
defineProps({
  data: {
    type: Object,
    default: () => {}
  }
})
</script>
<style lang="scss" scoped></style>
